{% extends '../layouts/layout.html' %}

{% block scripts %}
<script src="/js/user/settings.js"></script>
{% endblock %}

{% block content %}
<section>
  <form method="post" action="/user/settings" enctype="multipart/form-data" id="user-settings-form">
    <fieldset>
      <legend>設定您的用戶資料</legend>
      <p>
        <label class="label" for="user-name">使用者名稱:</label>
        <div class="field">
          <span id="user-name">{{ member.display_name }}</span>
        </div>
      </p>
      <p>
        <label class="label" for="user-thumb">個人頭像:</label>
        <div class="field">
          <img id="user-avatar" src="{{ member.thumbnail_url }}" alt="你" width="48" height="48">
          <br>
          <input type="file" id="user-thumb" name="user[thumb]" accept="image/png">
        </div>
      </p>
      <p>
        <label class="label" for="user-email">Email:</label>
        <div class="field">
          <input type="email" id="user-email" name="user[email]" value="{{ member.email }}" size="30" required>
        </div>
      </p>
      <p>
        <label class="label" for="user-profile">個人描述:</label>
        <div class="field">
          <textarea id="user-profile" name="user[profile]" rows="4" cols="50">{% if member.profile %}{{ member.profile }}{% endif %}</textarea>
          <br>
          <span class="text-hint">可以用 BBCode 來格式化你的個人描述</span>
        </div>
      </p>
      <p>
        <label class="label" for="user-website">網站:</label>
        <div class="field">
          <input type="url" id="user-website" name="user[website]" value="{% if member.website %}{{ member.website }}{% endif %}" size="30">
          <br>
          <span class="text-hint">http://example.com/</span>
        </div>
      </p>
      <p>
        <label class="label">&nbsp;</label>
        <div class="field">
          <button type="submit">設定</button>
        </div>
      </p>
    </fieldset>
  </form>
</section>
{% endblock %}
